<template>
  <div>测试表单</div>
  <div>
    <div>
      <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker
            v-model="queryParams.createTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
          <el-button type="primary" plain @click="openForm('create')"> <Icon icon="ep:plus" /> 新增 </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 用户表单 -->
    <AccountForm ref="formRef" @success="getList" />
  </div>
</template>

<script setup lang="ts" name="TestForm">
import { AccountForm } from "./components";

const queryFormRef = ref(); // 搜索的表单

const loading = ref(true); // 列表的加载中
const total = ref(0); // 列表的总页数
const list = ref([]); // 列表的数

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  username: undefined,
  mobile: undefined,
  createTime: undefined
});

/** 查询列表 */
const getList = async () => {
  loading.value = true;
  try {
    // const data = await UserApi.getUserPage(queryParams)
    // list.value = data.list
    // total.value = data.total
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1;
  getList();
};

/**重置查询*/
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
};

/** 添加/修改操作 */
const formRef = ref();
const openForm = (type: string, id?: number) => {
  // 调用 AccountForm组件的open方法
  formRef.value.open(type, id);
};
</script>

<style scoped lang="scss"></style>
